import React, {useRef, useEffect, createRef} from 'react';
import {CodeBlock} from "./code/CodeBlock";
import {Button, Divider,Card,Row,Col,Collapse} from 'antd';

//===========================================>
/**
 * 通过函数赋值的方式获取ref
 * @returns {JSX.Element}
 * @constructor
 */
const GetRefByFunction = ()=>{
    //通过函数获取ref
    let divRef = null;
    useEffect(() => {
        console.log(divRef,'通过函数的方式获取ref')
    }, []);
    return (
        <>
            <div id={'d1'} ref={e=> {divRef = e}}></div>
        </>
    )
}
const getRefByFunctionStr = `
export const GetRefByFunction = ()=>{
    //通过函数赋值的方式获取ref
    let divRef = null;
    useEffect(() => {
        console.log(divRef,'useRef')
    }, []);
    return (
        <>
            <div id={'d1'} ref={e=> {divRef = e}}></div>
        </>
    )
}
`
//===========================================>

/**
 * 通过React.createRef方式获取ref
 * @returns {JSX.Element}
 * @constructor
 */
const GetRefByReactCreateRef = ()=>{

    let divRef = React.createRef();

    useEffect(() => {
        console.log(divRef.current,'通过React.createRef获取ref')
    }, []);

    return(
        <>
            <div ref={divRef}>div</div>
        </>
    )
}

const getRefByReactCreateRefStr = `

const GetRefByReactCreateRef = ()=>{

    let divRef = React.createRef();

    useEffect(() => {
        console.log(divRef.current,'通过React.createRef获取ref')
    }, []);

    return(
        <>
            <div ref={divRef}>div</div>
        </>
    )
}
`
//===================================>

/**
 * 通过useRef的hooks获取ref
 * @returns {JSX.Element}
 * @constructor
 */
const GetRefByUseRef = ()=>{
    const divRef = useRef(null);

    useEffect(() => {
        console.log(divRef.current,'通过useRef的hooks获取ref')
    }, []);

    return(
        <>
            <div ref={divRef}>div</div>
        </>
    )
}

const getRefByUseRefStr = `
export const GetRefByUseRef = ()=>{
    const divRef = useRef(null);

    useEffect(() => {
        console.log(divRef.current,'useRef')
    }, []);

    return(
        <>
            <div ref={divRef}>div</div>
        </>
    )
}
`

const collapseData =  [
    {
        label: '通过函数赋值的方式获取ref',
        key: '1',
        children:<div>
            <Card  className={'card'}  title="通过函数的方式获取ref" style={{ width: 1000 }}>
                <GetRefByFunction/>
                <CodeBlock language={'JavaScript'} code={getRefByFunctionStr}/>
            </Card>
            <Divider/>
        </div>
    },
    {
        label: '通过React.createRef获取ref',
        key: '2',
        children:<div>
            <Card  className={'card'}  title="通过React.createRef获取ref" style={{ width: 1000 }}>
                <GetRefByReactCreateRef/>
                <CodeBlock language={'JavaScript'} code={getRefByReactCreateRefStr}/>
            </Card>
            <Divider/>
        </div>
    },
    {
        label: '通过useRef获取ref',
        key: '3',
        children:<div>
            <Card  className={'card'}  title="通过useRef获取ref" style={{ width: 1000 }}>
                <GetRefByUseRef/>
                <CodeBlock language={'JavaScript'} code={getRefByUseRefStr}/>
            </Card>
            <Divider/>
        </div>
    }
]

const App = () => {
    return (
        <>
            <h2>获取ref的几种方式</h2>
            <Collapse items={collapseData} bordered={false}/>
        </>
    )
}

/**
 * useRef
 * @returns {JSX.Element}
 * @constructor
 */
export const UseRefHooks = ()=><App/>


